<template>
  <section class="class-11_21">
    <el-container>
      <el-header>
        <div slot class="head01">商品列表</div>
      </el-header>
      <el-main class="box-main cell flex-cu">
        <div class="box-container">
          <div class="cell justify-between mb10">
            <div>
              <el-select v-model="pageForm.brand_id" placeholder="请选择商品品牌" @change="getGoodList();">
                  <el-option label="全部品牌" :value="0"></el-option>
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in brandList"
                    :key="item.id"
                  ></el-option>
                </el-select>
            </div>
            <div style="width:350px;">
              <el-input placeholder="请输入关键字" v-model="pageForm.key">
                <template #append>
                  <el-button #append :icon="Search" @click="getGoodList();"></el-button>
                </template>
              </el-input>
            </div>
          </div>
          <div>
            <router-link to="detail" class="c-pointer">
              <el-button type="primary" :icon="Plus">编辑</el-button>
            </router-link>
          </div>
        </div>
        <div class="table01 cell-1" style="overflow-y:auto;">
          <el-table :data="pageList" style="width: 100%;">
            <el-table-column prop="goods_id" label="id" width="80" />
            <el-table-column prop="goods_name" label="商品名称" width="180" />
            <el-table-column prop="goods_sn" label="货号" />
            <el-table-column prop="shop_price" label="价格" />
            <el-table-column label="推荐">
              <template #default="scope">{{scope.row.is_recommend === 1?'是':'否'}}</template>
            </el-table-column>
            <el-table-column label="新品">
              <template #default="scope">{{scope.row.is_recommend === 1?'是':'否'}}</template>
            </el-table-column>
            <el-table-column label="热卖">
              <template #default="scope">{{scope.row.is_hot === 1?'是':'否'}}</template>
            </el-table-column>
            <el-table-column label="上下架">
              <template #default="scope">{{scope.row.is_on_sale === 1?'是':'否'}}</template>
            </el-table-column>
            <el-table-column prop="store_count" label="库存" />
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <router-link
                  :to="{path:'detail',query:{'id':scope.row.goods_id}}"
                  class="c-pointer"
                >编辑</router-link>
                <span style="margin-left:10px;" class="c-pointer" @click="onDelete(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <pagination
          style="padding:0px 15px 15px 15px;"
          :page-sizes="[10, 20, 30, 40]"
          layout="prev, pager, next, jumper"
          :total="total"
          v-model:page="pageForm.pagestart"
          v-model:limit="pageForm.speed"
           @pagination="handleQuery"
        />
      </el-footer>
    </el-container>
  </section>
</template>
<script setup  lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { Plus, Search } from '@element-plus/icons-vue';
import { PageForm, List } from '@/api/product/types';
import { ElMessage as $message, ElMessageBox } from 'element-plus';
import useStore from '@/store';
const { product } = useStore();
const state = reactive({
  pageForm: {
    pagestart: 1,
    speed: 10,
    brand_id: 0,
    key: ''
  } as PageForm,
  pageList: [] as List[],
  total: 0,
  brandList: [] as any[]
});
const { pageForm, pageList, total, brandList } = toRefs(state);
// 获取商品列表
function getGoodList(tIndex = 1) {
  console.log(pageForm.value);
  pageForm.tIndex = tIndex;
  product.getGoodsList(pageForm.value).then(({ result }) => {
    const { goods_list,total } = result;
    state.pageList = goods_list;
    state.total = total;
  });
}
// 获取品牌列表
function getBrandList() {
  product.getBrandList().then(({ result }) => {
    state.brandList = result;
  });
}
// 删除商品
function onDelete(data: any) {
  ElMessageBox.confirm('此操作将删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    product.onDelete({ id: data.goods_id }).then(() => {
      $message({
        type: 'success',
        message: '删除成功'
      });
      getGoodList();
    });
  });
}
/**
 * 查询
 */
function handleQuery() {
  getGoodList(state.pageForm.pagestart);
}
onMounted(() => {
  getGoodList();
  getBrandList();
});
</script>
<style lang="scss">
.mb10 {
  margin-bottom: 10px;
}
.table01 {
  margin-top: 10px;
}

.box-main {
  margin: 0px 20px 20px 20px;
  border-radius: 4px;
  background-color: #f2f2f6;
  padding: 15px;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
</style>   